<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <meta http-Equiv="Expires" Content="0"/>
    <title>基于SpringBoot2.0的JVM性能监控</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <style type="text/css">
        .layui-card-body ul li {
            float: left;
            margin-top: 50px;
            width: 33%;
            position: relative;
        }

        .layui-card-body ul li p {
            text-align: left;
            display: inline-block;
            vertical-align: top;
            font-size: 33px;
            margin-left: 25px;
            color: #6b6b6b
        }

        .layui-card-body ul li div {
            vertical-align: text-bottom;
            margin-top: 15px;
            margin-left: 15px;
        }
    </style>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend id="actname">监控面板</legend>
</fieldset>
<div style="padding: 20px; background-color: #F2F2F2;">
    <div class="layui-col-md12">
        <div class="layui-card">
            <div class="layui-card-header">系统信息</div>
            <div class="layui-card-body" style="height: 150px;">
                <ul>
                    <li><i class="layui-icon" style="font-size: 80px;color:#00bcd4;">&#xe629;</i>
                        <p><span id="cpuCount"></span></p>
                        <div>Cpu数量</div>
                    </li>
                    <li><i class="layui-icon" style="font-size: 80px;color:#ff9800">&#xe653;</i>
                        <p style="font-size:17px;"><span id="uptime"></span></p>
                        <div style="margin-left:3px;">应用已运行</div>
                    </li>
                    <li><i class="layui-icon" style="font-size: 80px;color:#8bc34a;">&#xe7ae;</i>
                        <p style="font-size:15px;margin-top: -23px;">
                            <span>最大句柄数 : <span id="filesMax"></span></span><br>
                            <span>打开句柄数 : <span id="fileOpen"></span></span><br>
                            <span>平均负载:    <span id="loadAver"></span></span><br>

                        </p>
                        <div style="margin-left:13px;">应用信息</div>
                    </li>

                </ul>

            </div>
        </div>
    </div>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">JVM内存信息</div>
                <div class="layui-card-body" style="padding: 10px 5px;">
                    <div id="memory" style="height:200px;width: 310px;display: inline-block"></div>
                    <div id="nonHeapinfo" style="height:250px;width: 440px; display: inline-block"></div>
                    <div id="heapinfoClass" style="height:380px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">Threads: (线程)</div>
                <div class="layui-card-body">
                    <div id="threads" style="height:380px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">GC耗时</div>
                <div class="layui-card-body">
                    <div id="gctime" style="height:380px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md6" style="margin-top: -200px">
            <div class="layui-card">
                <div class="layui-card-header">GC时内存分配</div>
                <div class="layui-card-body">
                    <div id="gcmenory" style="height:380px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../layui/layui.js"></script>
<script src="../js/theme/sockjs.min.js?v=1"></script>
<script src="../js/theme/stomp.min.js?v=2"></script>
<script src="../js/theme/echarts.js"></script>
<script src="../js/theme/vintage.js"></script>

<script src="../js/config.js"></script>
<script src="../js/info.js"></script>
<script src="../js/memory.js"></script>
<script src="../js/threads.js"></script>
<script src="../js/gc.js"></script>
</body>
</html>